import React from 'react';

import Request from '@ajax/index.jsx';
import Tools from '@untils/tools.jsx';
import {APIS_PARTY_PAY} from '@apis/index.js';
import {parterPayFilters, sex, partyBranch} from '@assets/config/global.js';

import RCTable from '@components/table/index.jsx';
import NavTree from '@components/nav_tree/index.jsx';
import PageTopFilter from '@components/page_top_filter/index.jsx';
import ParterPayModal from './parter_pay_modal.jsx';

import './scss/index.scss';

const _req = new Request();

class PartyPay extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageSize: 10,
            currentPage: 1,
            pagination: null,

            // 查询
            name: '',
            phone: '',
            // left-select-tree
            selectedTreeKeys: [],
            expandedKeys: [],

            // pay_modal
            payModalVisible: false,
            rowData: {},
            showFooter: false
        };
        this.setCallback = Tools.setCallback.bind(this);
        this.seekPath = Tools.seekPath.bind(this);
        this.topFilterForm = null;
    }

    componentDidMount() {

    }

    //请求列表
    requestList() {
        let {pageSize, currentPage, name, phone, selectedTreeKeys} = this.state;
        let data = {
            pagination: {
                currentPage: currentPage,
                order: "string",
                orderType: "ACCEPTDATE",
                pageSize: pageSize
            },
            searchContent: {
                name,
                phone,
                orgId: selectedTreeKeys[0] - 0 || 0
            }
        };
        let options = Tools.objectAssign(APIS_PARTY_PAY.PARTERLIST, {data});
        _req.ajaxList(options, this);
    }

    //树筛选
    treeSeleted(selectedTreeKeys) {
        this.setCallback({selectedTreeKeys, currentPage: 1}, this.requestList);
        this.topFilterForm && this.topFilterForm.resetFields()
    }

    //查询
    submitSelect(filtes) {
        this.setCallback({...filtes, currentPage: 1}, this.requestList)
    }

    // 新增与编辑
    editOrAddParter(formInfo) {
        formInfo.partyMemberId = this.state.rowData.id;
        let options = Tools.objectAssign(APIS_PARTY_PAY.APPENDPARTERPAY, {data: formInfo});
        _req.axios(options).then(res => this.requestList());
    }

    // 编辑
    editParterPayMsg(e, record) {
        e.nativeEvent.stopImmediatePropagation();
        e.stopPropagation();
        this.setCallback({
            rowData: record,
            payModalVisible: true,
            showFooter: true
        });
    }

    // 编辑弹窗保存
    modalSubmitForm(formIfo) {
        this.setCallback({payModalVisible: false}, this.editOrAddParter.bind(this, formIfo));
    }

    // 编辑弹窗取消
    modalCancelForm() {
        this.setCallback({rowData: {}, payModalVisible: false});
    }

    //table 刷新
    tableRefresh() {
        this.setCallback({name: '', phone: '', currentPage: 1}, this.requestList);
        this.topFilterForm && this.topFilterForm.resetFields()
    }

    // 行点击
    onRowClick() {
        this.seekPath('/layout/partymanage');
    }

    render() {
        let {
            pagination = null,
            list = [],
            expandedKeys = [],
            selectedTreeKeys = [],
            payModalVisible = false,
            rowData = {},
            showFooter = false
        } = this.state;

        const columns = [{
            title: '序号',
            key: '序号',
            render: (txt, row, index) => <span>{index + 1}</span>
        }, {
            title: '党员姓名',
            dataIndex: 'name',
            key: 'name',
            render: (txt) => <p className="ell-1" title={txt || ''}>{txt || '---'}</p>
        }, {
            title: '手机号码',
            dataIndex: 'phone',
            key: 'phone',
            render: (txt) => <span>{txt || '---'}</span>
        }, {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            render: (txt) => <span>{sex[txt] ? sex[txt].name : '---'}</span>
        }, {
            title: '身份证号码',
            dataIndex: 'idCard',
            key: 'idCard',
            render: (txt) => <span>{txt}</span>
        }, {
            title: '所在党支部',
            dataIndex: 'orgId',
            key: 'orgId',
            render: (txt) => <span>{partyBranch[txt] ? partyBranch[txt].name : '否'}</span>
        }, {
            title: '操作',
            render: (record) => {
                return (
                    <div className="option-btns">
                        <span className="txt" onClick={(e) => this.editParterPayMsg(e, record)}>党员缴费</span>
                    </div>
                )
            }
        }];

        return (
            <div className="party-pay child-wrap">
                <NavTree
                    navTitle={'党员缴费'}
                    onSelect={this.treeSeleted.bind(this)}
                    // 展开受限制 要传expandedKeys onExpand selectedTreeKeys
                    // 以下三个都不传 是 一个自由组建
                    expandedKeys={expandedKeys}
                    selectedKeys={selectedTreeKeys}
                    onExpand={this.setCallback.bind(this)}
                />

                <div className="child-main-wrap">
                    <div className="child-main-content">
                        <PageTopFilter
                            title="缴费查询"
                            filters={parterPayFilters}
                            buttons={['查询', false]}
                            // 查询
                            submitForm={this.submitSelect.bind(this)}
                            wrappedComponentRef={node => this.topFilterForm = node}
                        />
                        <RCTable
                            pagination={pagination}
                            columns={columns}
                            dataSource={list}
                            // 刷新
                            refresh={this.tableRefresh.bind(this)}
                            // 行点击
                            clickRow={this.onRowClick.bind(this)}
                            onChange={(pagination) => {
                                let {selectedRowKeys = [], current: currentPage, pageSize, name = ''} = pagination;
                                this.setCallback({selectedRowKeys, pageSize, currentPage, name}, this.requestList)
                            }}
                        />
                    </div>
                </div>

                {
                    payModalVisible
                        ? <ParterPayModal
                            data={rowData}
                            modalVisible={true}
                            showFooter={showFooter}
                            submitForm={this.modalSubmitForm.bind(this)}
                            cancelForm={this.modalCancelForm.bind(this)}
                        />
                        : null
                }

            </div>
        )
    }
}

export default PartyPay;